Ext.onReady(function() {
	var system = {
		iconUrl : '',
		name : ''
	};
	// 定义顶部
	Ext.define('configCenter.system.topPanel', {
		extend : 'Ext.Panel',
		alias : 'widget.system.topPanel',
		height: 65,
	    border: false,
	    margins: '0 0 0 0',
	    collapseMode: 'mini',
	    collapsible: true,
	    bodyStyle: 'background-color:transparent;',
		items : [ {
			xtype : 'image',
			bind : {
				hidden : system.iconUrl,
				src : system.iconUrl
			}
		}, {
			xtype : 'label',
			text : system.name,
			style : 'font-size : 20px; color : blue;'
		} ]
	});

	// 定义底部
	Ext.define('configCenter.system.bottomPanel', {
		extend : 'Ext.toolbar.Toolbar',
		alias : 'widget.system.bottomPanel',
		items : {}
	});

	// 定义菜单
	Ext.define('configCenter.system.menu', {
		extend : 'Ext.tree.Panel',
		alias : 'widget.system.menu',
		rootVisible : false,
		iconCls : 'fa fa-bars',
		store : {
			autoLoad : true,
			proxy : {
				type : 'ajax',
				url : 'treeMenu'
			}
		},
		listeners : {
			itemclick : function(view, record, item, index, e) { // 点击事件
				var c = Ext.getCmp('centerPanelHD');
				var newTab = c.getComponent(record.data.id);
				if(!newTab){
					c.setActiveTab(c.add({
						id : record.data.id,
						title : record.data.text,
						closable : true,
						iconCls : record.data.iconCls,
						reorderable : true,
						html : '<iframe  src="'+ctx+record.data.url+'" frameborder="no" border="0" scrolling="no" width="100%" height="100%"></iframe>'
					}));
				}else{
					c.setActiveTab(newTab);
				}
				
			}
		}
	});

	// 定义TAB区域
	Ext.define('configCenter.system.centerPanel', {
		extend : 'Ext.tab.Panel',
		alias : 'widget.system.centerPanel',
		closeAction : 'hide',
		autoDestroy : false,
		tabPosition : 'top',
		plugins : [ {
			ptype : 'tabclosemenu',
			closeAllTabsText : '关闭所有',
			closeOthersTabsText : '关闭其他',
			closeTabText : '关闭'
		} ]
	});

	// 主界面
	Ext.define('configCenter.system.mainPanel', {
		extend : 'Ext.container.Container',
		alias : 'widget.mainPanel',
		requires : [ 'Ext.tab.Panel', 'Ext.layout.container.Border',
				'configCenter.system.topPanel',
				'configCenter.system.bottomPanel', 'configCenter.system.menu',
				'configCenter.system.centerPanel' ],
		layout : {
			type : 'border'
		},
		items : [ {
			region : 'north',
			xtype : 'system.topPanel'
		}, {
			region : 'west',
			title : '系统菜单',
			xtype : 'system.menu',
			width : 220,
			collapsible : true,
			split : true
		}, {
			region : 'center',
			xtype : 'system.centerPanel',
			id : 'centerPanelHD'
		}/*, {
			region : 'south',
			xtype : 'system.bottomPanel'
		}*/ ]
	});

	Ext.create('Ext.container.Viewport', {
		requires : [ 'Ext.layout.container.Fit',
				'configCenter.system.mainPanel' ],
		layout : {
			type : 'fit'
		},
		items : [ {
			xtype : 'mainPanel'
		} ]
	});

});